hover에 따라 주고싶은 element 스타일링하기

<div class="a">
  <div>hover me</div>
</div>
<div class="b">
  <div>style me</div>
</div>

.a:hover + .b > div {
    background: #ccc
}

<div class="a">
  <div>hover me</div>
</div>
<div>hello</div>
<div>world</div>
<div class="b">
  <div>style me</div>
</div>

.a:hover ~ .b > div {
    background: #ccc
}

<div class="parent">
  hover me
  <div class="child">style me</div>
</div>

.parent:hover .child {
  color: yellow
}

<div class="parent">
  style me
  <div class="child">hover me</div>
</div>

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}